<nz-breadcrumb>
  <nz-breadcrumb-item>主页</nz-breadcrumb-item>
  <nz-breadcrumb-item>学生管理</nz-breadcrumb-item>
</nz-breadcrumb>

<nz-layout class="inner-layout">
  <!-- 侧边栏 -->
  <nz-sider nzWidth="200px" nzTheme="light">
    <ul nz-menu nzMode="inline" class="sider-menu">
      <li nz-submenu nzOpen nzTitle="2019级">
        <ul>
          <li nz-menu-item nzSelected>
            <a (click)="setClassName('D自集成191')">D自集成191</a>
          </li>
          <li nz-menu-item>
            <a (click)="setClassName('D自集成192')">D自集成192</a>
          </li>
        </ul>
      </li>
      <li nz-submenu nzTitle="2018级">
        <ul>
          <li nz-menu-item>
            <a (click)="setClassName('D自集成181')">D自集成181</a>
          </li>
          <li nz-menu-item>
            <a (click)="setClassName('D自集成182')">D自集成182</a>
          </li>
        </ul>
      </li>
      <li nz-submenu nzTitle="2017级">
        <ul>
          <li nz-menu-item>
            <a (click)="setClassName('D自集成171')">D自集成171</a>
          </li>
          <li nz-menu-item>
            <a (click)="setClassName('D自集成172')">D自集成172</a>
          </li>
        </ul>
      </li>
      <li nz-submenu nzTitle="2016级">
        <ul>
          <li nz-menu-item>
            <a (click)="setClassName('D自集成161')">D自集成161</a>
          </li>
          <li nz-menu-item>
            <a (click)="setClassName('D自集成162')">D自集成162</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>

  <!-- 主要内容 -->
  <nz-content class="inner-content">
    <!-- 功能区 -->
    <div class="feature">
      <button nz-button nzType="default" (click)="openCreateStudentDrawer()">
        添加学生
      </button>

      <button nz-button nzType="default" (click)="openSendMessageDrawer()" [disabled]="!(isAllDisplayDataChecked || isIndeterminate)">
        发送消息
      </button>

      <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
        <input
          type="text"
          nz-input
          placeholder="姓名"
          [(ngModel)]="searchValue"
          (keyup.enter)="search()"
        />
      </nz-input-group>
      <ng-template #suffixIconButton>
        <button nz-button nzType="primary" nzSearch (click)="search()">
          <i nz-icon nzType="search"></i>
        </button>
      </ng-template>
    </div>
    <!-- 学生表 -->
    <nz-table
      #studentsTable
      [nzData]="students"
      (nzCurrentPageDataChange)="currentPageDataChange($event)"
    >
      <thead>
        <tr>
          <th
            nzShowCheckbox
            [(nzChecked)]="isAllDisplayDataChecked"
            [nzIndeterminate]="isIndeterminate"
            (nzCheckedChange)="checkAll($event)"
          ></th>
          <th nzShowExpand></th>
          <th>姓名</th>
          <th>学号</th>
          <th>性别</th>
          <th>联系方式</th>
          <th>宿舍</th>
          <th>邮箱</th>
          <th>民族</th>
          <th>出生日期</th>
          <th>政治面貌</th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <ng-template ngFor let-data [ngForOf]="studentsTable.data">
          <tr>
            <td
              nzShowCheckbox
              [(nzChecked)]="mapOfCheckedId[data._id]"
              (nzCheckedChange)="refreshStatus()"
            ></td>
            <td nzShowExpand [(nzExpand)]="mapOfExpandData[data._id]"></td>
            <td>{{ data.name }}</td>
            <td>{{ data.studentID }}</td>
            <td>{{ data.sex }}</td>
            <td>{{ data.tel }}</td>
            <td>{{ data.dorm }}</td>
            <td>{{ data.mail }}</td>
            <td>{{ data.nation }}</td>
            <td>{{ data.birthdate }}</td>
            <td>{{ data.politicsStatus }}</td>
            <td>
              <a (click)="openUpdateStudentDrawer(data)">编辑</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a
                nz-popconfirm
                nzTitle="确定删除这个学生？"
                (nzOnConfirm)="deleteRow(data._id)"
                >删除</a
              >
            </td>
          </tr>
          <tr [nzExpand]="mapOfExpandData[data._id]">
            <td></td>
            <td></td>
            <td colspan="10">
              <span class="expanded-item">身份证：{{ data.identityCard }}</span>
              <span class="expanded-item">毕业高中：{{ data.highSchool }}</span>
              <span class="expanded-item">住址：{{ data.adress }}</span>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </nz-table>
  </nz-content></nz-layout
>

<!-- 添加学生 -->
<nz-drawer
  [nzWidth]="600"
  [nzClosable]="false"
  [nzVisible]="createStudentDrawerVisible"
  nzPlacement="right"
  nzTitle="添加学生"
  (nzOnClose)="closeCreateStudentDrawer()"
>
  <form
    nz-form
    [formGroup]="createStudentForm"
    (ngSubmit)="createStudent(createStudentForm.value)"
  >
    <nz-form-item>
      <nz-form-control nzErrorTip="请输入姓名">
        <input type="text" nz-input formControlName="name" placeholder="姓名" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入学号">
        <input
          type="text"
          nz-input
          formControlName="studentID"
          placeholder="学号"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入邮箱">
        <input type="text" nz-input formControlName="mail" placeholder="邮箱" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入民族">
        <input
          type="text"
          nz-input
          formControlName="nation"
          placeholder="民族"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入出生日期">
        <input
          type="text"
          nz-input
          formControlName="identityCard"
          placeholder="出生日期"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入班级">
        <input
          type="text"
          nz-input
          formControlName="className"
          placeholder="班级"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入政治面貌">
        <input
          type="text"
          nz-input
          formControlName="politicsStatus"
          placeholder="政治面貌"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入宿舍">
        <input type="text" nz-input formControlName="dorm" placeholder="宿舍" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入毕业高中">
        <input
          type="text"
          nz-input
          formControlName="highSchool"
          placeholder="毕业高中"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入住址">
        <input
          type="text"
          nz-input
          formControlName="adress"
          placeholder="住址"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入联系方式">
        <input
          type="text"
          nz-input
          formControlName="tel"
          placeholder="联系方式"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control>
        <button
          nz-button
          nzType="primary"
          [disabled]="!createStudentForm.valid"
        >
          添加学生
        </button>
        <button nz-button (click)="restCreateStudentForm($event)">重置</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-drawer>

<!-- 编辑学生 -->
<nz-drawer
  [nzWidth]="600"
  [nzClosable]="false"
  [nzVisible]="updateStudentDrawerVisible"
  nzPlacement="right"
  nzTitle="编辑学生"
  (nzOnClose)="closeUpdateStudentDrawer()"
>
  <form
    nz-form
    [formGroup]="updateStudentForm"
    (ngSubmit)="updateStudent(updateStudentForm.value)"
  >
    <nz-form-item>
      <nz-form-control nzErrorTip="请输入姓名">
        <input type="text" nz-input formControlName="name" placeholder="姓名" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入学号">
        <input
          type="text"
          nz-input
          formControlName="studentID"
          placeholder="学号"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入邮箱">
        <input type="text" nz-input formControlName="mail" placeholder="邮箱" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入民族">
        <input
          type="text"
          nz-input
          formControlName="nation"
          placeholder="民族"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入出生日期">
        <input
          type="text"
          nz-input
          formControlName="identityCard"
          placeholder="出生日期"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入班级">
        <input
          type="text"
          nz-input
          formControlName="className"
          placeholder="班级"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入政治面貌">
        <input
          type="text"
          nz-input
          formControlName="politicsStatus"
          placeholder="政治面貌"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入宿舍">
        <input type="text" nz-input formControlName="dorm" placeholder="宿舍" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入毕业高中">
        <input
          type="text"
          nz-input
          formControlName="highSchool"
          placeholder="毕业高中"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入住址">
        <input
          type="text"
          nz-input
          formControlName="adress"
          placeholder="住址"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入联系方式">
        <input
          type="text"
          nz-input
          formControlName="tel"
          placeholder="联系方式"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control>
        <button
          nz-button
          nzType="primary"
          [disabled]="!updateStudentForm.valid"
        >
          保存学生
        </button>
        <button nz-button (click)="restUpdateStudentForm($event)">重置</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-drawer>

<!-- 发送消息 -->
<nz-drawer
  [nzWidth]="600"
  [nzClosable]="false"
  [nzVisible]="sendMessageDrawerVisible"
  nzPlacement="right"
  nzTitle="发送消息"
  (nzOnClose)="closeSendMessageDrawer()"
>
  <form
    nz-form
    [formGroup]="sendMessageForm"
    (ngSubmit)="sendMessage(sendMessageForm.value)"
  >
    <nz-form-item>
      <nz-form-control nzErrorTip="请输入标题">
        <input
          type="text"
          nz-input
          formControlName="subject"
          placeholder="标题"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control nzErrorTip="请输入内容">
        <textarea
          rows="4"
          nz-input
          formControlName="text"
          placeholder="内容"
        ></textarea>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control>
        <button nz-button nzType="primary" [disabled]="!sendMessageForm.valid">
          发送消息
        </button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-drawer>
